<template>
  <view class="container-child">
    <view class="img"  :style="`backgroundColor:${backgroundColor}`">
    	<image :src="imgSrc" class="icon"></image>
		<span>{{messageCount>=100?"99+":messageCount}}</span>
    </view>
    <text>{{description}}</text>
  </view>
</template>

<script>
export default {
  name: 'IconDescription',
  props: {
    imgSrc: String,
    description: String,
	backgroundColor:String,
	messageCount:Number
  }
}
</script>

<style lang="scss" scoped>
.container-child {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.icon {
  width: 25px;
  height: 25px;

}
.img{
	width: 50px;
	height: 50px;
	border-radius: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	span{
		background-color: red;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		position: absolute;
		right: -5px;
		top: -5px;
		text-align: center;
		color: #fff;
		font-size: .1em;
	}
}
</style>